<template>
  <el-form label-width="100px" ref="formRef" :model="form" :rules="formRules">
    <el-row>
      <el-col :span="12">
        <el-form-item label="键" prop="key">
          <el-input clearable placeholder="请输入键" v-model="form.key"></el-input>
          <div class="el-form-item-msg">键：会显示在页面上</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="值" prop="value">
          <el-input clearable placeholder="请输入值" v-model="form.value"></el-input>
          <div class="el-form-item-msg">值：是存入数据库中的值</div>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="14">
        <el-form-item label="显示效果" prop="display">
          <el-radio-group v-model="form.display">
            <el-radio-button value="default" border>default</el-radio-button>
            <el-radio-button value="primary" border>primary</el-radio-button>
            <el-radio-button value="success" border>success</el-radio-button>
            <el-radio-button value="info" border>info</el-radio-button>
            <el-radio-button value="warning" border>warning</el-radio-button>
            <el-radio-button value="danger" border>danger</el-radio-button>
            <div class="el-form-item-msg">
              <span style="margin: 0 15px 0 15px;">default</span>
              <el-tag style="margin-right: 12px;" type="primary">primary</el-tag>
              <el-tag style="margin-right: 12px;" type="success">success</el-tag>
              <el-tag style="margin-right: 12px;" type="info">info</el-tag>
              <el-tag style="margin-right: 12px;" type="warning">warning</el-tag>
              <el-tag style="margin-right: 12px;" type="danger">danger</el-tag>
            </div>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="是否默认" prop="defaulted">
          <el-radio-group v-model="form.defaulted">
            <el-radio-button :value="true" border>是</el-radio-button>
            <el-radio-button :value="false" border>否</el-radio-button>
          </el-radio-group>
          <div class="el-form-item-msg">一个字典只能有一个默认值</div>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="是否启用" prop="enabled">
          <el-radio-group v-model="form.enabled">
            <el-radio-button :value="true" border>启用</el-radio-button>
            <el-radio-button :value="false" border>停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input-number
              v-model="form.sort"
              :min="1"
              controls-position="right"
              size="large"
              placeholder="请输入排序"
          ></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" clearable placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="js">
import {reactive, ref} from "vue";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
})
const formRef = ref();

const formRules = reactive({
  key: [{required: true, message: "键为必填项", trigger: "blur"}],
  value: [{required: true, message: "值为必填项", trigger: "blur"}],
  display: [{required: true, message: "显示效果为必填项", trigger: "blur"}],
  defaulted: [{required: true, message: "是否默认为必填项", trigger: "blur"}],
  enabled: [{required: true, message: "是否启用为必填项", trigger: "blur"}],
  sort: [{required: true, message: "排序为必填项", trigger: "blur"}],
});
const getFormRef = () => {
  return formRef.value;
}

defineExpose({getFormRef});
</script>
